<template>
    <div class="author-card" style="width: 300px;">
        <!-- 头像 -->
        <el-avatar :size="60" :src="userInform.avatarUrl" style="margin-bottom: 8px" />
        
        <!-- 用户信息 -->
        <div class="user-info">
            <p class="nickname">{{ userInform.nickname }}</p>
            <p class="username">@{{ userInform.username }}</p>
        </div>

        <!-- 统计信息 -->
        <div class="stats">
            <div class="stat-item">
                <span class="value">{{ userInform.articleCount }}</span>
                <span class="label">篇原创</span>
            </div>
            <div class="stat-item">
                <span class="value">{{ userInform.likeCount }}</span>
                <span class="label">点赞</span>
            </div>
            <div class="stat-item">
                <span class="value">{{ userInform.collectCount }}</span>
                <span class="label">收藏</span>
            </div>
            <div class="stat-item">
                <span class="value">{{ userInform.fansCount }}</span>
                <span class="label">粉丝</span>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="buttons">
                <!-- 关注 / 取消关注 按钮 -->
    <el-button 
        type="primary" 
        round 
        v-if="articleRelationshipWithUser !== 0"
        @click="toggleFollow"
    >
        {{ isUserFollowAuthor ? '取消关注' : '关注' }}
    </el-button>
            <el-button plain round v-if="articleRelationshipWithUser !== 0" @click="goToPrivateMessage">私信</el-button>
            <el-button type="primary" round v-if="articleRelationshipWithUser == 0" @click="goto('/homePage')">我的主页</el-button>
            <el-button type="danger" round v-if="articleRelationshipWithUser == 0">管理文章</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserInfoByUserId } from '../api/userApi'
import { gerUserIdByArticleId } from '../api/articlesApi.js'
import {getUserArticleRelationship} from '../api/userArticleApi.js'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { UserInforStore} from '../stores/userInforStore'
import {getUserFollowAuthor} from '../api/userUserApi.js'
import {unFollowAuthor,followAuthor} from '../api/userUserApi.js'
const route = useRoute()
const router = useRouter()
const articleId = route.params.id
const userInform = ref({
    id:0,
    nickname: '',
    username: '',
    avatarUrl: '',
    articleCount:'',
    likeCount:'',
    collectCount:'',
    fansCount:'',
})

const goToPrivateMessage = async () => {
  const authorId = await gerUserIdByArticleId(route.params.id)
  router.push({
    name: 'privateMessagePage',
    query: { contactId: authorId }
  })
}


const getUserInforByArticleId = async () => {
    const userId = await gerUserIdByArticleId(articleId)
    getUserInfoByUserId(userId).then((res) => {
        console.log();
        
        userInform.value.nickname = res.nickname
        userInform.value.username = res.username
        userInform.value.avatarUrl = res.avatarUrl
        userInform.value.articleCount = res.articleCount
        userInform.value.likeCount = res.likeCount
        userInform.value.collectCount = res.collectCount
        userInform.value.fansCount = res.fansCount
        userInform.value.id = parseInt(res.id, 10)
        console.log("userInform.value",userInform.value);
        
    })
}

// 文章作者关系
//0是我的文章，1喜欢2不喜欢3收藏4收藏+喜欢5无关
const articleRelationshipWithUser = ref(0)

const getRelationship = async (articleId) => {
  articleRelationshipWithUser.value = await getUserArticleRelationship(articleId)
}


// 读者作者关系
//0无关1互关2前关注后3后关注前
const isUserFollowAuthor = ref(false)

const toggleFollow = async () => {
    const userStore = UserInforStore()
    const userId = userStore.userInfor?.id
    const authorId = await gerUserIdByArticleId(articleId)

    // 发送请求切换关注状态（伪代码）
    if (isUserFollowAuthor.value) {
        // 已关注，执行取消关注逻辑
        console.log("取消关注");
        
        await unFollowAuthor(userId, authorId)
    } else {
        console.log("关注");
        // 未关注，执行关注逻辑
        await followAuthor(userId, authorId)
    }

    // 切换本地状态
    isUserFollowAuthor.value = !isUserFollowAuthor.value
}

const userFollowAuthor = async () => {
    const userStore = UserInforStore()
    const userId = userStore.userInfor?.id // 安全访问 id
    const authorId = await gerUserIdByArticleId(articleId)
    console.log(authorId);
    
    isUserFollowAuthor.value = await getUserFollowAuthor(userId,authorId)
}
getRelationship(articleId)
userFollowAuthor()

onMounted(() => {
    getUserInforByArticleId()


    
})

// 暴露 refresh 方法供父组件调用
defineExpose({
  refresh: getUserInforByArticleId
})

const goto = (path) => {
  window.location.href = path+'/'+userInform.value.id
}

</script>

<style>

.author-card {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-info {
    margin-bottom: 10px;
}

.nickname {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}


.username {
    font-size: 14px;
    color: #999; /* 灰色 */
    margin: 5px 0 0;
    text-transform: lowercase; /* 小写显示 */
}

.stats {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.stat-item {
    text-align: center;
}

.stat-item .value {
    font-size: 16px;
    color: #333;
}

.stat-item .label {
    font-size: 14px;
    color: #999;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.el-button {
    width: 100px;
}
</style>